<!-- 加载地图平台服务 -->
<template>
  <div class="load-server">
    <a-button @click="dataCheck">
      <form-outlined />
      加载平台数据
    </a-button>
    <a-button style="margin-left: 15px" @click="insertToDatabase">
      <form-outlined />
      插入数据
    </a-button>
    <a-button style="margin: 25px 0 0 0" @click="updataToDatabase">
      <form-outlined />
      更新数据
    </a-button>
    <a-button style="margin: 25px 0 0 43px" @click="delectToDatabase">
      <form-outlined />
      删除数据
    </a-button>
    <a-button style="margin: 25px 0 0 0px" @click="exportShp">
      <form-outlined />
      导出shp
    </a-button>
  </div>
</template>

<script setup>
import {
  FormOutlined,
  EditOutlined,
  DeleteOutlined,
  CloudUploadOutlined,
  FileSearchOutlined,
  ExportOutlined
} from '@ant-design/icons-vue'
import { reactive, ref, onMounted, nextTick, getCurrentInstance } from 'vue'
import mapapi from '../../api/maptest.js'
import WKT from 'terraformer-wkt-parser'
import { message } from 'ant-design-vue'
import { exportJson } from '../../utils/xingutils.js'

const property = ref(false)
const obj = reactive({
  name: 'a',
  id: '234353'
})

const { proxy } = getCurrentInstance()
const map = proxy.$root.$map

onMounted(() => {
  console.log('总控件中的map')
})

const setMapCenter = () => {
  // 改变校区显示区域
  map.setCenter([113.52810341075156, 34.81427535493019])
  map.setZoom(15)
}
// 加载平台服务
const loadPlatformServer = async() => {
  const params = {
    tableName: 'test221129'
  }
  const res = await mapapi.getLayerData(params).catch(err => console.log(err))
  message.success('查询成功')
  console.log('地图数据', res)
  // 将数据转换为geojson数据
  const layerData = wktExchangeGeojson(res.data)
  console.log('转换后的======》', layerData)
  romeveDataLayer()
  addDataLayer(layerData)
}
// 数据查询
const dataCheck = () => {
  loadPlatformServer()
  // 将数据展示到地图上
  setMapCenter()
}
// 加载图层
const addDataLayer  = (data) => {
  map.addSource('get-database', { 'type': 'geojson', 'data': data })
  //面层加样式
  map.addLayer({
    id: 'jianzhu-layer',
    type: 'fill-extrusion',
    source: 'get-database',
    paint: {
      'fill-extrusion-color': ['get', 'color'],
      'fill-extrusion-height': 50,
      'fill-extrusion-base': 0,
      'fill-extrusion-opacity': 0.8
    }
  })
}
// 删除数据图层
const romeveDataLayer  = () => {
  if (map.getLayer('jianzhu-layer')) map.removeLayer('jianzhu-layer')
  if (map.getSource('get-database')) map.removeSource('get-database')
}
// wkt转geojson
const wktExchangeGeojson = (data) => {
  console.log('data======》', data)
  const featuresData = {
    features: [],
    type: 'FeatureCollection'
  }
  for (const one of data) {
    const feature = {
      type: 'Feature',
      properties: {...one},
      geometry: {},
      id: one.gid
    }
    delete feature.properties.geom
    feature.geometry = WKT.parse(one.geom)
    featuresData.features.push(feature)
  }
  return featuresData
}

// 插入数据
const insertData = {
  'gid': 162,
  'color': '#F0F0F0',
  'base_height': 0,
  'sort': 0,
  'geom': 'POLYGON ((113.5250608942127 34.81471932856863, 113.5250639843851 34.814684758736604, 113.52616743480066 34.81465719166065, 113.526162864586 34.81454627330102, 113.5261220871376 34.81454682998967, 113.52612405567194 34.81450605486802, 113.52505681877685 34.81453504482872, 113.52505656011843 34.81458011952951, 113.52503486805388 34.8145807503465, 113.52503476951273 34.81459792166091, 113.52495755625773 34.81459833573074, 113.52496050480238 34.81468921414856, 113.52493880860202 34.81469056041947, 113.52494186495322 34.81472477605428, 113.5250608942127 34.81471932856863))',
  'floor_dx': '0',
  'color_back': '#f4f3d1',
  'floor_ds': '6',
  'name': '荷园学宿10号楼',
  'alias': null,
  'mapid': '01109',
  'id': 35,
  'height': 36
}
const insertToDatabase = async() => {
  insertData.color = '#F0F0F0'
  const params = {
    tableName: 'test221129',
    geoField: 'geom',
    geoType: 'wkt',
    params: insertData
  }
  const res = await mapapi.insertData(params).catch(err => console.log(err))
  console.log('插入数据返回', res)
  message.success('数据插入成功')
  loadPlatformServer()
}
// 更新数据
const updataToDatabase  = async() => {
  insertData.color = '#FF0000'
  const params = {
    tableName: 'test221129',
    geoField: 'geom',
    geoType: 'wkt',
    conditions: [{
      'field': 'name',
      'operate': 'like',
      'value': '荷园学宿10号楼'
    }],
    params: insertData
  }
  const res = await mapapi.upData(params).catch(err => console.log(err))
  console.log('更新数据返回', res)
  message.success('数据更新成功')
  loadPlatformServer()
}
// 删除数据
const delectToDatabase  = async() => {
  const params = {
    tableName: 'test221129',
    conditions: [{
      'field': 'name',
      'operate': 'like',
      'value': '荷园学宿10号楼'
    }]
  }
  const res = await mapapi.delectData(params).catch(err => console.log(err))
  console.log('删除数据返回', res)
  message.success('数据删除成功')
  loadPlatformServer()
}
// 导出shp
const exportShp  = async() => {
  const params = {
    tab: 'platform_poi_test'
  }
  const res = await mapapi.exportData(params).catch(err => console.log(err))
  console.log('删除数据返回', res)
  exportJson(res, `${params.tab}.shp`)
  message.success('数据导出成功')
}


// defineExpose({
//   functionName
// })

</script>

<style lang='scss' scoped>
.load-server{
  width: 335px;
  padding: 5px 0 24px 15px;

}
</style>
